<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="../images/yc.png" type="image/x-icon">
    <link rel="stylesheet" href="../css/layui.css"  media="all">
</head>
<body>
<br />
<div class="demoTable">
    <span class="navy_padding">商品类型名称</span>
    <div class="layui-inline">
        <input class="layui-input" id="tname" name="tname"  autocomplete="on">
    </div>
    <button type="button" class="layui-btn layui-btn-warm layui-btn-radius" onclick="add()"> 添加  </button>
</div>

<table class="layui-hide" id="type_data" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="checkboxTpl">
    <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
</script>
<script src="../../js/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../js/layui.all.js" charset="utf-8"></script>

<script>
    layui.use('table', function(){
        var table = layui.table, form = layui.form;
        table.render({
            elem: '#type_data',
            url:'../../type/finds',
            toolbar: 'default', //开启头部工具栏，并为其绑定左侧模板
            title: '商品类型信息表',
            cellMinWidth: 120,
            id: "type_data",
            method: "POST",
            limit: 2, // 每页显示多少条数据
            limits: [2, 5, 10, 20, 30, 40, 50, 100],
            cols: [[
                {
                    type: 'checkbox', fixed: 'center'},
                {field:'tno', title:'编号',fixed: 'center', unresize: true, sort: true, align: 'center'},
                {field:'tname', title:'类型名称', align: 'center', edit: 'text'},
                {fixed: 'right', title:'操作', toolbar: '#barDemo', align: 'center'},
                {field:'status', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
            ]],
            page: {
                layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'], //自定义分页布局
                //,curr: 5 // 设定初始在第 5 页
                groups: 10, // 只显示 1 个连续页码
                first: '首页', //不显示首页
                last: '尾页' //不显示尾页

            }
        });

        //监听锁定操作
        //监听锁定操作
        form.on('checkbox(lockDemo)', function(obj){
            obj.elem.checked = !obj.elem.checked;
            form.render('checkbox'); // 渲染
            let txt = "下架";
            let status = 0;
            if (!obj.elem.checked) {
                txt = "上架";
                status = 1;
            }
            layer.confirm('您确定要 ' + txt + ' 这个类型的商品吗?', {btn: ['确定','取消']}, function(){
                layer.closeAll('dialog');
                obj.elem.checked =  !obj.elem.checked;
                form.render('checkbox');
                layer.alert("哈哈", {title: "提示"});

            });
        });

        // 头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data; //获取选中的数据;
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择您要删除的数据...', {icon:5,offset:"auto",time:2000});
                    } else {
                        layer.confirm('数据一旦删除将不能恢复，您确定要删除吗？',{icon: 3, title: "确认"}, function(index){
                            var arrs = [];
                            for (var i = 0; i < data.length; i ++) {
                                arrs.push(data[i].id);
                            }
                            console.info(arrs);
                            layer.close(index);
                            table.reload('admin_data',  // table id
                                {
                                    where: { id: 1, status: 2 }, // 参数
                                    page: {
                                        curr: 1 // 重新从第 1 页开始
                                    }
                                });
                        });
                    }
                    break;
            };
        });

        // 监听行工具事件
        table.on('tool', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('数据一旦删除将不能恢复，您确定要删除吗？', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 3,
                    value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });

    function add() {
        let tname = $.trim($("#tname").val());

        $.post("../../type/add", {tname, tname}, rt => {
            if(rt.code == 200) {
                $("#tname").val(""); // 清空文本框，避免重复提交
                layui.table.reload("type_data"); // 要刷新的表格的id
                return;
            }
            alert("类型信息添加失败...");
        }, "json");
    }
</script>
</body>
</html>